<template>
    <div class="home-container">
        <VmFloatToolbar :y="new Number(800)"/>
        <vm-banner :imgList="bannerData" />
        <vm-category-list style="left: 10%; top: -530px;"
        :goodsList="goodsList"
        :goodsColData="goodsColData"/>
        <ul class="small-column-container container">
            <li v-for="item in smallColumnData" :key="item.name">
                <a :href="item.hrefUrl" >
                    <img :src="item.imgUrl" class="animate__animated animate__bounce"/>
                    <p>{{item.name}}</p>
                </a>
            </li>
        </ul>
        <ul class="new-products container">
            <li v-for="item in newProductsData" :key="item.name" class="goods__card-hover">
                <a :href="item.hrefUrl">
                    <img :src="item.imgUrl" />
                </a>
            </li>
        </ul>

        <LimitedTimeKill />
        <LimitedTimePurchase />
        <HotRecommend />
        <PhonePart />
        <ComputerPart />
    </div>
</template>

<script>
import VmBanner from '@/components/vm-banner'
import VmCategoryList from '@/components/vm-category-list'
import VmFloatToolbar from '@/components/vm-float-toolbar'

import LimitedTimeKill from './LimitedTimeKill'
import LimitedTimePurchase from './LimitedTimePurchase'
import HotRecommend from './HotRecommend'
import PhonePart from './Phone'
import ComputerPart from './Computer'

import { ref } from 'vue'  
import { getBanner, getGoodsColList, goodsCategoryList, getSmallColNav, 
getNewProducts} from '@/api/home'

export default {
  name: 'HomePart',
  components: {
    VmBanner,
    VmCategoryList,
    VmFloatToolbar,
    LimitedTimeKill,
    LimitedTimePurchase,
    HotRecommend,
    PhonePart,
    ComputerPart
   },
  setup () {
    // 获取banner数据
    const bannerData = ref([])
    getBanner().then(data => {
        bannerData.value = data.result
    })

    // 获取商品栏目列表和对应板块信息
    const goodsList = ref(goodsCategoryList)
    const goodsColData = ref([]) // 商品栏目板块信息
    goodsList.value.forEach(item => {
        getGoodsColList(item).then(data => {
            data.data[0].goodsName = item
            goodsColData.value.push(data.data)
        })
    })

    // 获取小栏目导航数据
    const smallColumnData = ref([])
    getSmallColNav().then(data => {
        smallColumnData.value = data.data
    })

    // 获取四大新品
    const newProductsData = ref([])
    getNewProducts().then(data => {
        newProductsData.value = data.data
    })

    return { bannerData, goodsList, goodsColData, smallColumnData, newProductsData }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/goods-card.scss";

.home-container {
    width: 100%;
    position: relative;
    .small-column-container {
        display: flex;
        align-items: flex-start;
        height: 200px;
        top: -460px;
        li {
            width: 150px;
            height: 95px;
            display: flex;
            margin-left: 3.5%;
            align-items: center;
            flex-direction: column;
            a {
                display: flex;
                align-items: center;
                flex-direction: column;
                &:hover {
                    color: #ee3f4d;
                    img {
                        animation-iteration-count: infinite;
                    }
                }
                img {
                    width: 48px;
                    height: 48px;
                }
                p {
                    font-size: 14px;
                    margin-top: 15px;
                }
            }
        }
    }
    .new-products {
        display: flex;
        flex-direction: row;
        top: -520px;
        li {
            width: 291px;
            height: 194px;
            background: #FFF;
            margin-right: 10px;
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
}

</style>>
